<script setup>
//import axios from 'axios'

//引入dayjs日期库
import dayjs from 'dayjs'
import { computed, ref, watch } from 'vue'
import { fetchNowData, fetchAirData, fetch7DayData, fetchIndicesData } from '../api/weatherAPI'
import 'qweather-icons/font/qweather-icons.css'
//声明一个变量获取当天天气数据
const hourNow = ref({}) //表示此数据是空数组,用来存放api中返回的当前天气数据
//天气更新时间
const updateTime = ref('')
//空气质量
const airData = ref({})
//紫外线指数
const indicesData = ref({})

//引用状态管理
import { useCityStore } from '../stores/cityStore'
//获取store实例
const cityStore = useCityStore()

// 添加侦听器：监听状态管理中Location状态的变化
watch(
  //第一个参数（必选）：监听的数据源
  () => cityStore.location,
  //第二个参数（必选）：回调函数，当数据源有变化时需要做的事情
  () => {
    getData(cityStore.location.id)
    // city = ref()
  },
  //第三个函数（可选）：即使回调，初始状态执行一次回调函数
  { immediate: true }
)

async function getData(locationID) {
  //获取了实时天气的数据
  const res = await fetchNowData(locationID) //调用api模块化封装的函数
  // console.log(res)
  hourNow.value = res.now
  // console.log('当前天气图标代码:', hourNow.value.icon)

  updateTime.value = dayjs(res.updateTime).format('YYYY-MM-DD HH:mm')

  //获取空气质量的数据
  const resAir = await fetchAirData(locationID) //调用api模块化封装的函数
  // console.log(resAir)
  airData.value = resAir.now

  //获取紫外线的数据
  const resIndices = await fetchIndicesData(locationID, 5)
  // console.log(resIndices)
  indicesData.value = resIndices.daily[0]
}

//计算属性
const airText = computed(() => {
  const aqi = airData.value.aqi
  if (aqi <= 50) {
    return '优'
  } else if (aqi <= 100) {
    return '良'
  } else if (aqi <= 150) {
    return '轻度污染'
  } else if (aqi <= 200) {
    return '中度污染'
  } else if (aqi <= 300) {
    return '重度污染'
  } else if (aqi <= 500) {
    return '严重污染'
  }
})

// 定义图标颜色映射对象
const iconColorMap = {
  100: '#ffd700', // 晴
  101: '#b0d5ff', // 多云
  104: '#035585', // 阴
  305: '#3977b1', // 小雨
  306: '#3977b1', // 中雨
  307: '#3977b1', // 大雨
  308: '#3977b1', // 暴雨
  400: '#ffffff', // 小雪
  401: '#ffffff', // 中雪
  402: '#ffffff', // 大雪
  399: '#3977b1', // 雨
  499: '#ffffff', // 雪

  // 可按需添加更多天气代码和对应颜色
}
// 计算图标颜色
const iconColor = computed(() => {
  // 将 hourNow.value.icon 转换为字符串类型
  const iconKey = String(hourNow.value.icon)
  return iconColorMap[iconKey] || '#000000' // 默认颜色
})
</script>


<template>
  <!-- 在页面中也可以使用响应状态数据 -->
  <!-- <h3>实时天气预报</h3> -->
  <div class="now">
    <div class="top">
      <span>{{ cityStore.location.name }}</span>
      <span class="time">{{ updateTime }}</span>
    </div>

    <div class="mid">
      <div class="air">
        <p>AQI {{ airText }}</p>
      </div>
      <div class="weather">
        <i :class="`qi-${hourNow.icon}`" :style="{ color: iconColor }"></i>
        <div>
          <p>{{ hourNow.temp }}°</p>
          <p>{{ hourNow.text }}</p>
        </div>
      </div>
      <div class="text"></div>
    </div>

    <div class="botton">
      <div>
        <div class="">{{ hourNow.windScale }}级</div>
        <div class="win">{{ hourNow.windDir }}</div>
      </div>
      <div>
        <div class="">{{ hourNow.humidity }}%</div>
        <div class="win">相对湿度</div>
      </div>
      <div>
        <div class="">{{ indicesData.category }}</div>
        <div class="win">紫外线</div>
      </div>
      <div>
        <div class="">{{ hourNow.feelsLike }}°</div>
        <div class="win">体感温度</div>
      </div>
      <div>
        <div class="">{{ hourNow.vis }}km</div>
        <div class="win">能见度</div>
      </div>
      <div>
        <div class="">{{ hourNow.precip }}mm</div>
        <div class="win">降水量</div>
      </div>
      <div>
        <div class="">{{ hourNow.pressure }}级</div>
        <div class="win">大气压</div>
      </div>
    </div>
    <div id="main" ref="chartDom"></div>

    <!-- 添加图表库所需要的容器 -->
    <!-- vue3中获取dom元素的方式,此为第二步，在容器元素中添加ref属性与第一步中的引用进行绑定 -->
  </div>
</template>

<style scoped>
.now {
  width: 100%;
  margin: 1rem 0rem;
  padding: 1rem 0;
  background: rgba(218, 226, 242);
  border-radius: 1rem;
}
.now .top {
  padding: 1rem 0.5rem;
  overflow: hidden;
}
.now .top > span:nth-last-of-type(1) {
  float: right;
}

.mid > .air {
  padding: 0 1rem;
  overflow: hidden;
}
.air > p {
  text-align: center;
  width: 6rem;
  height: 2rem;
  line-height: 2rem;
  background: rgba(149, 179, 89);
  border-radius: 1rem;
  color: white;

  float: right;
}
.mid > .weather {
  display: flex;
  align-items: center; /*垂直居中 */
  justify-content: center; /*水平居中 */
}

.mid > .weather > i {
  font-size: 4rem;
  margin-right: 1rem;
}
.mid > .weather > div > p:nth-of-type(1) {
  font-size: 2rem;
}

.botton > div:nth-of-type(2) > div:nth-of-type(1) {
  font-weight: bold;
  font-size: 1rem;
}
.botton > div:nth-of-type(1) > div:nth-of-type(1) {
  font-weight: bold;
  font-size: 1rem;
}
.botton > div:nth-of-type(3) > div:nth-of-type(1) {
  font-weight: bold;
  font-size: 1rem;
}
.botton > div:nth-of-type(4) > div:nth-of-type(1) {
  font-weight: bold;
  font-size: 1rem;
}
.botton > div:nth-of-type(5) > div:nth-of-type(1) {
  font-weight: bold;
  font-size: 1rem;
}
.botton > div:nth-of-type(6) > div:nth-of-type(1) {
  font-weight: bold;
  font-size: 1rem;
}
.botton > div:nth-of-type(7) > div:nth-of-type(1) {
  font-weight: bold;
  font-size: 1rem;
}

.botton > div:nth-of-type(1) > div:nth-of-type(2) {
  color: #0000005e;
}

.botton > div:nth-of-type(2) > div:nth-of-type(2) {
  color: #0000005e;
}
.botton > div:nth-of-type(3) > div:nth-of-type(2) {
  color: #0000005e;
}

.botton > div:nth-of-type(4) > div:nth-of-type(2) {
  color: #0000005e;
}
.botton > div:nth-of-type(5) > div:nth-of-type(2) {
  color: #0000005e;
}
.botton > div:nth-of-type(6) > div:nth-of-type(2) {
  color: #0000005e;
}

.botton > div:nth-of-type(7) > div:nth-of-type(2) {
  color: #0000005e;
}

.botton {
  margin: 5rem 2rem 1rem;
  padding: 1rem;
  border-radius: 1rem;
  background: rgba(207, 216, 231);
  display: flex;
  justify-content: space-between;
}
</style>